"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/16
 */
import * as React from 'react'

const {View, ImageBackground, ScrollView, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import {SCREEN_WIDTH} from "../../constant";
import MyText from "../../component/MyText";
import Colors from "../../assets/styles/Colors";
import NavBackButton from "../../component/BackButton";
import Line from "../../component/Line";
import IncomePage from "./Income";
import Request from "../../utils/Request";
import Validator from "../../utils/Validator";
import {toastValidateError} from "../../utils/tools";
import {AuthComponent} from "../../interface/index";

const {Actions} = require("react-native-router-flux");


const {Button, Modal} = require('antd-mobile');
const prompt = Modal.prompt;
const Alert = Modal.alert;

class BalancePage extends React.Component<AuthComponent, any> {


    constructor(props: any, context: any) {
        super(props, context);

        this.state = {
            currentTab: 0,
            showModal: false
        }
    }


    componentWillMount(): void {
        this.props.dispatch({
            type: 'auth/upDataBalance'
        })
    }

    doWithDraw = (number) => {
        if (Validator.validator(number, Validator.numberReg)) {
            const _number = Number(number);
            if (Number(this.props.auth.profile.store_collect) > 0) {
                if (_number < Number(this.props.auth.profile.store_collect)) {
                    this.props.dispatch({
                        type: 'auth/doWithDraw',
                        payload: {price: _number}
                    });
                    return;
                }
            }
            toastValidateError(null, '余额不足')
        } else {
            toastValidateError(null, '请输入正确的数字')
        }
    };

    onWithDrawPress = () => {
        // Alert('提现', '确定提现?', [
        //     {text: '取消',},
        //     {text: '确认', onPress: this.doWithDraw},
        // ])
        prompt(' 提现', '请输入提现金额',
            [
                {text: '取消'},
                {
                    text: '确定',
                    onPress: this.doWithDraw,
                }
            ], 'number', null, ['请输入提现金额'])
    };

    closeModal = () => {
        this.setState({showModal: false})
    };
    renderHeader = () => {
        return (
            <ImageBackground source={{uri: Request.checkImageUrl(this.props.auth.profile.store_image)}}
                             width={SCREEN_WIDTH}
                             style={[{height: autoSize(210)}]}>
                <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                    <MyText color={Colors.White} fontSize={20}>{`账户余额(元)`}</MyText>
                    <MyText color={Colors.White} fontSize={36}
                            style={{marginTop: 5}}>{Number(this.props.auth.profile.store_collect).toFixed(2)}</MyText>
                </View>
                <View style={[commonStyles.flexRow, {
                    height: autoSize(46),
                    paddingHorizontal: autoSize(30),
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    backgroundColor: 'rgba(255,255,255,0.3)'
                }]}>

                    <TouchableOpacity onPress={Actions.setting}>
                        <MyText color={Colors.White}>账户管理</MyText>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={Actions.income}>
                        <MyText color={Colors.White} style={{marginTop: 5}}>收支详情</MyText>
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        )
    };

    render() {
        if (!this.props.auth.isSignIn) {
            return null;
        }
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               title={{title: this.props.title, tintColor: '#fff'}}
                />
                <ScrollView>
                    {this.renderHeader()}
                    <View style={{paddingVertical: 20, paddingHorizontal: 40}}>
                        <Button type={'primary'}
                                onClick={this.onWithDrawPress}
                                style={{marginBottom: 10, height: 38}}>提现</Button>
                        <Button type={'primary'}
                                style={{height: 38}}
                                onClick={Actions.setting}>设置</Button>
                    </View>
                </ScrollView>
            </View>
        );
    }
}


export default connect(
    ({auth}) => ({auth})
)(BalancePage);